<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>汽车名称映射</title>
    <style>
        #app {
            width: 100%;
            height: 100%;
            /*background-image: url("../static/img/mamama.jpg");*/
        }
    </style>
</head>
<body>
    <div id="app" style="width: 100%;height: 100%">
        <h2 style="text-align: center">汽车名称关系映射</h2>
        <div>
            <h4 style="text-align: center">单条检索</h4>
            <div style="text-align: center">
                <el-input placeholder="请输入关键字..." v-model="keyWord" style="width: 400px">
                </el-input>
                <el-button type="primary" plain @click="singleQuery">查询</el-button>
                <div style="margin: 20px 0;"></div>
                <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        v-model="textarea"
                        maxlength="60"
                        show-word-limit
                        style="width: 400px"
                >
                </el-input>
            </div>
        </div>
        <el-divider></el-divider>
        <div>
            <h4 style="text-align: center">批量检索</h4>
            <div style="text-align: center">
                <el-upload
                        class="upload-demo"
                        action="http://8.130.99.127:8080/car300/car/upload"
                        name="uploadFile"
                        :auto-upload=true>
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传excel文件，且不超过10MB</div>
                </el-upload>
            </div>
        </div>
    </div>
</body>
<!--vue-->
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<!--axios-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<!--饿了吗-->
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                keyWord:"",
                textarea:"",
            }
        },
        methods:{
            //上传文件到服务器，触发action中对于的url
            handlePreview(file) {
                console.log(file);
            },

            singleQuery(){
                let _this = this
                axios.get(`http://8.130.99.127:8080/car300/car/singleQuery/${this.keyWord}`).then(function (res) {
                    console.log(res);
                    _this.textarea = res.data
                })
            }
        }
    })
</script>
</html>